<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    progress{
        width: 100%;
        margin:50px 0;
    }
    h3 {
        text-align: center;
    }
</style>
<body>
    <!--进度条-->
    <h3>左右晃动的进度条</h3>
    <progress></progress><!--左右晃动的进度条--><br>
    <h3>指定位置的进度条</h3>
    <progress value="0.5"></progress><!--指定位置的进度条--><br>
    <h3>动态的进度条</h3>
    <progress value="0" id="progres"></progress> <!--动态的进度条--><br>
    <script>
        /*动态进度条js*/
        var timer;
        pro();
       function pro(){
            var value=0;
            timer=setInterval(function () {
                value+=0.1;
                progres.value=value;
                if(value>=1){
                    clearInterval(timer);
                    alert("下载完成");
                }
            },400);
        }
    </script>
</body>
</html>